<template>
  <el-button @click="cancelRequest('users/list')">取消请求</el-button>
  <el-button @click="cancelAllRequest">取消全部请求</el-button>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

<script setup lang="ts">
import request, {
  cancelRequest,
  cancelAllRequest,
} from "@/components/axios/index";
import { onMounted } from "vue";

interface Req {
  apiKey: string;
  area?: string;
  areaID?: string;
}
interface Res {
  area: string;
  areaCode: string;
  areaid: string;
  dayList: any[];
}
const get15DaysWeatherByArea = (data: Req) => {
  return request<Req, Res>({
    url: "users/list",
    method: "get",
    data,

    interceptors: {
      requestInterceptors(res: any) {
        console.log("接口请求拦截");

        return res;
      },
      responseInterceptors(result: any) {
        console.log("接口响应拦截");
        return result;
      },
    },
  });
};
onMounted(async () => {
  const res = await get15DaysWeatherByArea({
    apiKey: "http://localhost:3000/",
  });
  console.log(res);
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
